<!--
    * Time    : 2021-01-09 15:42:26
    * Author  : zhangTj
    * Desc    : 服务商首页
-->

<template>
    <div class="w750">
        <div>
            <div class="bg-img px-3 pt-2 text-fff" style="height: 230px; border-radius: 0 0 7% 7%">
                <div class="d-flex">
                    <div style="width: 60px; height: 60px">
                        <img v-if="indexData.avatarUrl" :src="$imgUrlHead + indexData.avatarUrl" class="w-100 h-100 rounded-circle" alt />
                        <img v-else src="../../assets/images/head-default.png" class="w-100 h-100 rounded-circle" alt />
                    </div>
                    <div class="ml-1 flex-1 d-flex flex-column j-sa">
                        <div class="d-flex a-center">
                            <span class="font-20 line-clamp1" style="max-width: 200px; width: auto">{{ indexData.actualName || '-' }}</span>
                            <div class="font-12 border font-12" style="padding: 0px 4px; margin-left: 7px; opacity: 0.7">
                                <svg width="60" height="11.52" style="fill: currentColor; color: #fff">
                                    <text dominant-baseline="baseline" font-size="10" y="10.52" style="line-height: 1; vertical-align: middle">
                                        {{
                                            indexData.serviceProvidersType == 'CITY_TYPE'
                                                ? indexData.serviceProvidersName + '服务商'
                                                : indexData.serviceProvidersName + '服务商'
                                        }}
                                    </text>
                                </svg>
                            </div>
                        </div>
                        <template v-if="indexData.serviceProvidersType == 'CITY_TYPE'">
                            <div class="font-12" @click="$toPage('facilitatorlowerlevel')">
                                <span>区县分布:{{ indexData.nextServiceProvidersCount || 0 }}个</span>
                                <span class="iconfont iconArrowRight ml" style="font-size: 12px"></span>
                            </div>
                        </template>
                        <template v-else>
                            <div class="font-12" @click="goFacilitatorInfo(indexData.previousServiceName)">
                                <span>所属市级：{{ indexData.previousServiceName || '暂无' }}</span>
                                <span class="iconfont iconArrowRight ml" style="font-size: 12px"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- 数据显示 -->
            <div class="p-15p position-relative" style="top: -145px">
                <div>
                    <!-- <div
                        class="grid-column2 font-12 mx-2 py-1 px-15p text-fff"
                        style="background: linear-gradient(180deg, #1566ba 0%, #0d4e94 100%); border-radius: 4px 4px 0px 0px"
                    >
                        <div>
                            <div>
                                <span class="iconfont iconcommission mr" style="font-size: 14px"></span>
                                <span>订单佣金</span>
                            </div>
                            <div class="mt opacity-7">获得{{ indexData.commissionRatio || 0 }}%区域订单佣金</div>
                        </div>
                        <div>
                            <div>
                                <span class="iconfont iconserver-discount mr" style="font-size: 14px"></span>
                                <span>购买优惠</span>
                            </div>
                            <div class="mt opacity-7">享最高等级优惠</div>
                        </div>
                    </div> -->
                    <div class="p-15p bg-fff rounded-4" @click="$toPage('facilitatorProfit')">
                        <div class="d-flex a-center j-sb mb-1">
                            <h1 class="font-18">我的佣金</h1>
                            <span class="iconfont iconArrowRight" style="font-size: 12px"></span>
                        </div>
                        <div class="grid-column3">
                            <div>
                                <div class="font-16" style="color: #fd4d29">
                                    {{ money(indexData.totalPendingSettleCommission)[0] }}.{{ money(indexData.totalPendingSettleCommission)[1] }}
                                </div>
                                <span class="text-999 font-12">待结算佣金</span>
                            </div>
                            <div>
                                <div class="font-16" style="color: #fd4d29">
                                    {{ money(indexData.totalForeseeCommission)[0] }}.{{ money(indexData.totalForeseeCommission)[1] }}
                                </div>
                                <div class="text-999 mt font-12">预获得佣金</div>
                            </div>
                            <div>
                                <div class="font-16" style="color: #fd4d29">
                                    {{ money(indexData.totalCommission)[0] }}.{{ money(indexData.totalCommission)[1] }}
                                </div>
                                <div class="text-999 mt font-12">累计获得佣金</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="p-15p bg-fff mt-1 rounded-4" @click="$toPage('facilitatorBond')">
                    <div class="d-flex a-center j-sb mb-1">
                        <h1 class="font-18">我的保证金</h1>
                        <span class="iconfont iconArrowRight" style="font-size: 12px"></span>
                    </div>
                    <div class="grid-column3">
                        <div>
                            <div class="font-18" v-if="indexData.originalDepositAmount">{{ indexData.originalDepositAmount | fotmatMoney }}</div>
                            <div class="font-18" v-else>0</div>
                            <span class="text-999 font-12">保证金额</span>
                        </div>
                        <div>
                            <div class="font-18" v-if="indexData.deductedDepositAmount">{{ indexData.deductedDepositAmount | fotmatMoney }}</div>
                            <div class="font-18" v-else>0</div>
                            <span class="text-999 font-12">已抵扣金额</span>
                        </div>
                        <div>
                            <div class="font-18" v-if="indexData.depositAmount">{{ indexData.depositAmount | fotmatMoney }}</div>
                            <div class="font-18" v-else>0</div>
                            <span class="text-999 font-12">剩余金额</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 客服咨询 -->
        <div @click="serverDialog = true" class="position-fixed" style="right: 15px; bottom: 70px">
            <div class="d-flex flex-column a-center rounded-circle" style="background: rgba(0, 0, 0, 0.3); padding: 11px 5px">
                <span class="iconfont iconcustomer-service text-fff"></span>
                <div class="text-center d-flex mt-01">
                    <svg width="40" height="10">
                        <text dominant-baseline="top" x="2" y="8.52" fill="#fff" font-size="9" style="">联系客服</text>
                    </svg>
                </div>
            </div>
        </div>

        <!-- 客服弹窗 -->
        <van-dialog v-model="serverDialog" show-cancel-button :show-confirm-button="false">
            <div class="p-15p">
                <div style="width: 125px; height: 125px; margin: 0 auto">
                    <img src="~@/assets/images/kefu.png" class="w-100 h-100" alt="" />
                </div>
                <div>
                    <div class="d-flex a-center text-center mt-2">
                        <div class="py-1 bg-f8 flex-1 text-999 rounded-3">{{ indexData.shopContactPhone }}</div>
                        <a :href="'tel:' + indexData.shopContactPhone">
                            <div class="p-1 text-fff rounded-3" style="background: #007fff">拨打电话</div>
                        </a>
                    </div>
                    <div class="d-flex a-center text-center mt-2">
                        <div class="py-1 bg-f8 flex-1 text-999 rounded-3">{{ indexData.shopWeChat }}</div>
                        <div
                            v-clipboard:copy="indexData.shopWeChat"
                            v-clipboard:success="copySuccess"
                            v-clipboard:error="copyError"
                            class="p-1 text-fff rounded-3"
                            style="background: #007fff"
                        >
                            复制微信
                        </div>
                    </div>
                </div>
            </div>
        </van-dialog>

        <!-- 底部栏 -->
        <div class="position-fixed bottom-0 w-100 bg-fff" style="max-width: 750px">
            <div class="grid-column2 text-center py">
                <div class="d-flex flex-column a-center" style="color: #007fff">
                    <div style="width: 25px; height: 25px">
                        <img src="@/assets/images/facilitatorIndex-active.png" alt="" class="w-100 h-100" />
                    </div>
                    <div class="font-12 mt-02">首页</div>
                </div>
                <div class="d-flex flex-column a-center" @click="$toPage('/facilitatorMy')">
                    <div style="width: 25px; height: 25px">
                        <img src="@/assets/images/facilitatorMy.png" alt="" class="w-100 h-100" />
                    </div>
                    <div class="font-12 mt-02">我的</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { providersIndex } from 'api/facilitator'
import cash from 'utils/tool'

export default {
    name: '',
    components: {},
    data() {
        return {
            serverDialog: false, // 客服咨询弹窗
            indexData: {},
            money: cash
        }
    },
    computed: {},
    watch: {},
    filters: {
        // 返回金额千分位
        fotmatMoney(value) {
            if (!value) {
                return value
            }
            return value.toLocaleString()
        }
    },
    created() {},
    destroyed() {},
    mounted() {
        this.getDetail()
    },
    methods: {
        // 获取首页详情
        getDetail() {
            providersIndex()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.indexData = res.result
                })
                .catch((err) => {
                })
        },

        copySuccess() {
            this.$toast.success({
                message: '内容已复制',
                duration: 1000
            })
        },
        copyError() {
            this.$toast.fail({
                message: '内容复制失败',
                duration: 1000
            })
        },
        goFacilitatorInfo(name) {
            if (name) {
                this.$router.push({
                    name: 'facilitatorInfo',
                    query: {
                        id: this.indexData.previousServiceId
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.bg-img {
    background: url('../../assets/images/facilitator-bg.png') no-repeat right bottom, linear-gradient(180deg, #007fff 0%, #1778ff 100%);
    background-size: 319px 270px, 100%;
}
</style>
